<template>
  <div class="layout" >
    <Layout>
      <Header>
        <div style="width: 100%;background-color: #F6F6F6;">
          <div style="padding-top: 1%;padding-left: 10%">
            <Form ref="formInline"  label-position="right" :label-width="70">

              <Row>
                <Col span="8">
                <FormItem label="名称">
                  <Input  v-model="searchBox.name" placeholder="规则名称">
                  </Input>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="二次过滤">
                  <Input  v-model="searchBox.name2" placeholder="规则名称">
                  </Input>
                </FormItem>
                </Col>
                <Col span="5">
                <FormItem>
                  <Button type="primary" size="large" icon="ios-search" @click="query()">查  找</Button>
                </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </Header>
      <Content style="padding: 0 1% 0 1%">
        <div style="width: 100%;height: 50px;background-color: white;position:relative;">
          <div style="position: absolute;top: 50%;transform: translateY(-50%);padding-right: 20px;right: 0px;">
            <!--<Button type="primary" icon="plus" size="large" @click="openDlg()">新  增</Button>-->
            <!--<Button type="ghost" icon="trash-a" size="large" @click="deleteData()">删  除</Button>-->
          </div>
        </div>
        <Table border :row-class-name="rowClassName"  :loading="Table.loading" :columns="Table.columns1" :data="Table.data" highlight-row></Table><br>

      </Content>
    </Layout>



  </div>
</template>

<script>
  export default {
    data () {
      return {

        searchBox: {//查询框
          typelist: [{value: '1', label: '分片规则'}, {value: '2', label: '销售规则'}, {
            value: '3',
            label: '渠道规则',
            disabled: true
          }],
          typevalue: null,
          name: null,//查询的名称
          name2: null,
          projguid: [],
        },
        formdata: {//表单数据
          ruleid: '',
          ruletype: '',//规则类型
          projguid: [],//选择的项目ID
          datefw: '',//日期范围
          rulename: '',//规则名称
          points: [],//无意义,仅用来自定义校验,
          yjitems: [//点数规则明细
            {id: 0, min: null, max: null, point: null}
          ],
          selection: [],
          //ruleid: 26, sortid: 0, minnum: 1, maxnum: 2, point: 4
        }
        ,


        Table: {
          loading: false,
          columns1: [//列表行
            {
              type: 'index',
              align: 'center'
            },
            {
              title: '代码',
              key: 'code',
              align: 'center',
            },
            {
              title: '名称',
              key: 'name',
              align: 'center',
            },
            {
              title: '现价',
              key: 'price',
              align: 'center',
            },

            {
              title: '行权比例',
              key: 'xqbl',
              ellipsis: true,
              align: 'center',
            },
            {
              title: '行权价',
              key: 'xqj',
              align: 'center',
            },
            {
              title: '到期时间',
              key: 'lastDate',
              align: 'center',
            },
            {
              title: '类型',
              key: 'type',
              align: 'center',
            },
            {
              title: '底层股票',
              key: 'gpname',
              align: 'center',
            }
            ,
            {
              title: '底层股票现价',
              key: 'gpprice',
              align: 'center',
            }
            ,
            {
              title: '溢价',
              key: 'yj',
              align: 'center',
            }
          ],
          data: [],//列表数据
          page: {//分页信息
            totalRecord: 0,
            pageSize: 10,
            currentPage: 1
          }
        },
      }},
    methods: {
      query(){
        const that=this;
        that.Table.loading=true;
        var info={
          name:  this.searchBox.name,
          filtername : this.searchBox.name2,
        };
        this.$http.post("/service/interface/queryWL",info).then(function (data) {
          var data=data.data.data;
          for(var it of data){
              if(it.lastDate!=null){
                  it.lastDate=new Date(it.lastDate).toLocaleString();
              }
              if(it.stock!=null){
                it.gpcode=it.stock.code;
                it.gpname=it.stock.name;
                it.gpprice=it.stock.xj;
              }
              if(it.yj)it.yj+="%";
          }
          that.Table.data=data;
//          that.$set(that.Table,"data",data);
          that.Table.loading=false;
        }, function (err) {
          that.Table.loading=false;
        });



      },
      rowClassName (row, index) {

        return row.classname;
      }
    },
    mounted(){//初始化页面

    },
  }
</script>

<style scope>
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }

  .tableorow1 td{
    background-color: #ccffff;
    /*color: #fff;*/
  }
  .tableorow2 td{
    background-color: #cccccc;
    /*color: #fff;*/
  }
</style>
